<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>alatka-rule-admin</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap-icons/font/bootstrap-icons.min.css}"/>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap-table/dist/bootstrap-table.min.css}"/>
</head>
<body>
<div class="container mt-4">
    <div class="card mb-3">
        <div class="card-header bg-light d-flex justify-content-between align-items-center">
            <h5 class="mb-0">报文域查询</h5>
            <button class="btn btn-sm btn-outline-secondary"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#cardCollapse"
                    aria-expanded="true"
                    aria-controls="cardCollapse">
                <i class="bi bi-arrows-angle-contract"></i>
            </button>
        </div>
        <div class="card-body collapse show" id="cardCollapse">
            <div class="row mb-3">
                <input type="hidden" id="displayMessageId" name="messageId">
                <input type="hidden" id="displayCharset" name="charset">
                <input type="hidden" id="displayRemark" name="remark">
                <div class="col-md-3 d-flex align-items-center">
                    <label for="displayType" class="form-label text-nowrap me-2">类型：</label>
                    <select class="form-select" id="displayType" name="type" disabled>
                        <option value="iso">8583</option>
                        <option value="fixed">固定格式</option>
                    </select>
                </div>
                <div class="col-md-3 d-flex align-items-center">
                    <label for="displayGroup" class="form-label text-nowrap me-2">分组：</label>
                    <input type="text" class="form-control" id="displayGroup" name="group" disabled>
                </div>
                <div class="col-md-3 d-flex align-items-center">
                    <label for="displayCode" class="form-label text-nowrap me-2">交易码：</label>
                    <input type="text" class="form-control" id="displayCode" name="code" disabled>
                </div>
                <div class="col-md-3 d-flex align-items-center">
                    <label for="displayKind" class="form-label text-nowrap me-2">种类：</label>
                    <input type="text" class="form-control" id="displayKind" name="kind" disabled>
                </div>
            </div>
            <div class="row mb-3 subdomainDisplay">
                <div class="col-md-3 d-flex align-items-center">
                    <label for="displayDomain" class="form-label text-nowrap me-2">子域名称：</label>
                    <input type="text" class="form-control" id="displayDomain" name="domain" disabled>
                </div>
                <div class="col-md-3 d-flex align-items-center">
                    <label for="displayUsage" class="form-label text-nowrap me-2">子域用法：</label>
                    <input type="text" class="form-control" id="displayUsage" name="usage" disabled>
                </div>
                <div class="col-md-3 d-flex align-items-center">
                    <label for="displayDomainType" class="form-label text-nowrap me-2">子域类型：</label>
                    <input type="text" class="form-control" id="displayDomainType" name="domainType" disabled>
                </div>
            </div>
            <form id="searchForm" class="row g-3 mt-4">
                <div class="col-md-2">
                    <label for="domainNo" class="form-label">序号</label>
                    <input type="number" class="form-control" id="domainNo" name="domainNo" placeholder="输入序号">
                </div>
                <div class="col-md-2">
                    <label for="name" class="form-label">名称</label>
                    <input type="text" class="form-control" id="name" name="name" placeholder="输入名称">
                </div>
                <div class="col-md-4">
                    <label for="remark" class="form-label">描述</label>
                    <input type="text" class="form-control" id="remark" name="remark" placeholder="输入描述">
                </div>
                <div class="col-md-2">
                    <label for="existSubdomain" class="form-label">存在子域</label>
                    <select class="form-select" id="existSubdomain" name="existSubdomain">
                        <option value="">全部</option>
                        <option value="true">是</option>
                        <option value="false">否</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="status" class="form-label">状态</label>
                    <select class="form-select" id="status" name="status">
                        <option value="">全部</option>
                        <option value="OPEN">OPEN</option>
                        <option value="CLOSE">CLOSE</option>
                        <option value="RAW">RAW</option>
                    </select>
                </div>
                <div class="col-12 text-center">
                    <button type="button" class="btn btn-secondary me-2" id="resetButton">
                        <i class="bi bi-arrow-counterclockwise"></i> 重置
                    </button>
                    <button type="button" class="btn btn-primary" id="searchButton">
                        <i class="bi bi-search"></i> 查询
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-6 mb-3">
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="window.history.back()">
                <i class="bi bi-arrow-left"></i> 返回上级
            </button>
        </div>
        <div class="col-6 text-end mb-3">
            <button type="button" class="btn btn-sm btn-outline-info" id="addButton"
                    onclick="showEditModal('/field/create', true)">
                <i class="bi bi-plus-lg"></i> 新增
            </button>
            <button type="button" class="btn btn-sm btn-outline-warning" id="editButton"
                    onclick="showEditModal('/field/update', false)">
                <i class="bi bi-pencil-square"></i> 更新
            </button>
            <button type="button" class="btn btn-sm btn-danger" id="deleteButton"
                    onclick="showDeleteModal('/field/delete')">
                <i class="bi bi-trash"></i> 删除
            </button>
        </div>
    </div>

    <table id="dataTable"
           data-toggle="table"
           data-method="get"
           data-url="/field/page"
           data-sort-name="domainNo"
           data-sort-order="asc"
           data-striped="true"
           data-pagination="true"
           data-pagination-loop="false"
           data-side-pagination="server"
           data-detail-view="true"
           data-detail-view-by-click="true"
           data-detail-filter="detailFilter"
           data-detail-formatter="detailFormatter"
           data-click-to-select="true"
           data-maintain-selected="true">
        <thead>
        <tr>
            <th data-radio="true"></th>
            <th data-field="id" data-visible="false">ID</th>
            <th data-field="domainNo">序号</th>
            <th data-field="name" data-formatter="nameFormatter">名称</th>
            <th data-field="remark">描述</th>
            <th data-field="className">java类型</th>
            <th data-field="pattern">域值格式</th>
            <th data-field="fixed" data-formatter="fixedFormatter">是否定长</th>
            <th data-field="length">字节长度</th>
            <th data-field="maxLength">最大长度</th>
            <th data-field="parseType">域解析类型</th>
            <th data-field="lenParseType">变长域长度域解析类型</th>
            <th data-field="status">状态</th>
        </tr>
        </thead>
    </table>
</div>

<div class="modal fade" id="editModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑报文域</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editForm">
                    <input type="hidden" id="editMessageId" name="messageId">
                    <input type="hidden" id="editId" name="id">
                    <div class="row mb-3">
                        <div class="col-md-2">
                            <label for="editDomainNo" class="form-label">序号</label>
                            <input type="number" class="form-control" id="editDomainNo" name="domainNo" value="0"
                                   required>
                        </div>
                        <div class="col-md-3">
                            <label for="editName" class="form-label">名称</label>
                            <input type="text" class="form-control" id="editName" name="name" placeholder="输入名称"
                                   required>
                        </div>
                        <div class="col-md-3">
                            <label for="editAliasName" class="form-label">别名</label>
                            <input type="text" class="form-control" id="editAliasName" name="aliasName"
                                   aria-describedby="aliasNameDesc" placeholder="输入别名">
                            <div id="aliasNameDesc" class="form-text">
                                TLV类型中Tag名称
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label for="editRemark" class="form-label">描述</label>
                            <input type="text" class="form-control" id="editRemark" name="remark" placeholder="输入描述"
                                   required>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <label for="editClassName" class="form-label">java类型</label>
                            <input type="text" class="form-control" id="editClassName" name="className"
                                   placeholder="输入类型">
                        </div>
                        <div class="col-md-4">
                            <label for="editPattern" class="form-label">域值格式</label>
                            <input type="text" class="form-control" id="editPattern" name="pattern"
                                   placeholder="输入域值格式">
                        </div>
                        <div class="col-md-4">
                            <label for="editStatus" class="form-label">状态</label>
                            <select class="form-select" id="editStatus" name="status" required>
                                <option value="OPEN">OPEN</option>
                                <option value="CLOSE">CLOSE</option>
                                <option value="RAW">RAW</option>
                            </select>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-2">
                            <label for="editFixed" class="form-label">是否定长</label>
                            <select class="form-select" id="editFixed" name="fixed" required>
                                <option value="true">定长</option>
                                <option value="false">变长</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="editLength" class="form-label">字节长度</label>
                            <input type="number" class="form-control" id="editLength" name="length" value="0"
                                   required>
                        </div>
                        <div class="col-md-2">
                            <label for="editMaxLength" class="form-label">最大长度</label>
                            <input type="number" class="form-control" id="editMaxLength" name="maxLength" value="0"
                                   required>
                        </div>
                        <div class="col-md-3">
                            <label for="editParseType" class="form-label">域解析类型</label>
                            <select class="form-select" id="editParseType" name="parseType" required>
                                <option value="ASCII" selected>ASCII</option>
                                <option value="BINARY">BINARY</option>
                                <option value="BCD">BCD</option>
                                <option value="EBCDIC">EBCDIC</option>
                                <option value="NONE">NONE</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="editLenParseType" class="form-label">变长域长度域解析类型</label>
                            <select class="form-select" id="editLenParseType" name="lenParseType" required>
                                <option value="ASCII">ASCII</option>
                                <option value="BINARY">BINARY</option>
                                <option value="BCD">BCD</option>
                                <option value="EBCDIC">EBCDIC</option>
                                <option value="NONE" selected>NONE</option>
                            </select>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <label for="editExistSubdomain" class="form-label">是否存在子域</label>
                            <select class="form-select" id="editExistSubdomain" name="existSubdomain" required>
                                <option value="true">存在</option>
                                <option value="false" selected>不存在</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="editSubdomainType" class="form-label">子域类型</label>
                            <select class="form-select" id="editSubdomainType" name="subdomainType" required>
                                <option value="FIXED">FIXED</option>
                                <option value="TLV">TLV</option>
                                <option value="TLV2">TLV2</option>
                                <option value="TV">TV</option>
                                <option value="ULV">ULV</option>
                                <option value="ULV2">ULV2</option>
                                <option value="ULV3">ULV3</option>
                                <option value="UV">UV</option>
                                <option value="UVAS">UVAS</option>
                                <option value="PAGE">PAGE</option>
                                <option value="BITMAP">BITMAP</option>
                                <option value="NONE" selected>NONE</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="editNonSubdomainException" class="form-label">未配置子域异常</label>
                            <select class="form-select" id="editNonSubdomainException" name="nonSubdomainException"
                                    required>
                                <option value="true">抛出异常</option>
                                <option value="false" selected>不抛出异常</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="editPageSizeName" class="form-label">分页记录数字段名称</label>
                            <input type="text" class="form-control" id="editPageSizeName" name="pageSizeName"
                                   placeholder="输入名称">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveEditBtn">确认</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">删除报文域</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>确定要删除选中的记录？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="saveDeleteBtn">确认</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="editSubMessageModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">配置子域</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editSubMessageForm">
                    <input type="hidden" id="editSubMessageFieldId" name="fieldId">
                    <input type="hidden" id="editSubMessageId" name="id">
                    <input type="hidden" id="editSubMessageType" name="type">
                    <input type="hidden" id="editSubMessageGroup" name="group">
                    <input type="hidden" id="editSubMessageCode" name="code">
                    <input type="hidden" id="editSubMessageKind" name="kind">
                    <input type="hidden" id="editSubMessageCharset" name="charset">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="editSubMessageDomain" class="form-label">子域名称</label>
                            <input type="text" class="form-control" id="editSubMessageDomain" name="domain"
                                   placeholder="输入子域名称" required>
                        </div>
                        <div class="col-md-6">
                            <label for="editSubMessageUsage" class="form-label">子域用法</label>
                            <input type="text" class="form-control" id="editSubMessageUsage" name="usage"
                                   placeholder="输入子域用法">
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="editSubMessageDomainType" class="form-label">子域类型</label>
                            <select class="form-select" id="editSubMessageDomainType" name="domainType">
                                <option value="">无</option>
                                <option value="TLV">TLV</option>
                                <option value="TLV2">TLV2</option>
                                <option value="TV">TV</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="editSubMessageEnabled" class="form-label">是否可用</label>
                            <select class="form-select" id="editSubMessageEnabled" name="enabled" required>
                                <option value="true" selected>正常</option>
                                <option value="false">禁用</option>
                            </select>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <label for="editSubMessageRemark" class="form-label">描述</label>
                            <input type="text" class="form-control" id="editSubMessageRemark" name="remark"
                                   placeholder="输入描述" required>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <label for="editSubMessageHolder" class="form-label">实体类</label>
                            <input type="text" class="form-control" id="editSubMessageHolder" name="holder"
                                   placeholder="输入实体类" value="com.alatka.messages.core.holder.MessageHolder">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveEditSubMessageBtn">确认</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="deleteSubMessageModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">删除报文子域</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>确定要删除选中的记录？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="saveDeleteSubMessageBtn">确认</button>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script th:src="@{/webjars/interactjs/dist/interact.min.js}"></script>
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/webjars/bootstrap-table/dist/bootstrap-table.min.js}"></script>
<script th:src="@{/webjars/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js}"></script>
<script th:src="@{/js/init.js}"></script>
<script>
    initTable();
    initDisplay();

    function initDisplay() {
        const urlParams = new URLSearchParams(window.location.search);
        const messageId = urlParams.get('messageId');
        httpClient(`/message/query?id=${messageId}`, 'GET', null, function (data) {
            $('#displayMessageId').val(data.id);
            $('#displayType').val(data.type);
            $('#displayGroup').val(data.group);
            $('#displayCode').val(data.code);
            $('#displayKind').val(data.kind);
            $('#displayDomain').val(data.domain);
            $('#displayUsage').val(data.usage);
            $('#displayDomainType').val(data.domainType);
            $('#displayCharset').val(data.charset);
            $('#displayRemark').val(data.remark);

            if (data.kind !== 'subPayload') {
                $('.subdomainDisplay').hide();
            }
        });
    }

    function refresh() {
        $('#dataTable').bootstrapTable('refreshOptions', {
            pageNumber: 1,
            sortOrder: "asc",
            sortName: "domainNo"
        });
    }

    function detailFilter(index, row) {
        return row.existSubdomain;
    }

    function detailFormatter(index, row) {
        const containerId = `subdomain-container-${row.id}`;

        setTimeout(() => {
            loadSubdomainData(row.id, containerId);
        }, 0);

        return `
        <div class="row ms-3 mt-3 mb-3">
            <div class="col-md-3">
                <div class="d-flex align-items-center">
                    <label for="detailSubdomainType" class="form-label text-nowrap me-2">子域类型：</label>
                    <input type="text" class="form-control" id="detailSubdomainType" name="subdomainType" value="${row.subdomainType}" disabled>
                </div>
            </div>
            <div class="col-md-3">
                <div class="d-flex align-items-center">
                    <label for="detailNonSubdomainException" class="form-label text-nowrap me-2">未配置子域异常：</label>
                    <input type="text" class="form-control" id="detailNonSubdomainException" name="nonSubdomainException" value="${row.nonSubdomainException ? '抛出异常' : '不抛出异常'}" disabled>
                </div>
            </div>
            <div class="col-md-3">
                <div class="d-flex align-items-center">
                    <label for="detailPageSizeName" class="form-label text-nowrap me-2">分页记录数字段：</label>
                    <input type="text" class="form-control" id="detailPageSizeName" name="pageSizeName" value="${row.pageSizeName ?? ''}" disabled>
                </div>
            </div>
            <div class="col-md-3">
                    <label class="form-label text-nowrap me-2">配置子域：</label>
                <button type="button" class="btn btn-sm btn-outline-info" onclick="showEditSubMessageModal(${row.id}, '${containerId}', '/message/create', true, ${row.domainNo})"><i class="bi bi-plus-lg"></i></button>
                <button type="button" class="btn btn-sm btn-outline-warning" onclick="showEditSubMessageModal(${row.id}, '${containerId}', '/message/update', false)"><i class="bi bi-pencil-square"></i></button>
                <button type="button" class="btn btn-sm btn-danger" onclick="showDeleteSubMessageModal(${row.id}, '${containerId}')"><i class="bi bi-trash"></i></button>
            </div>
        </div>
        <div id="${containerId}" class="ms-3 me-3">加载中...</div>
    `;
    }

    function loadSubdomainData(fieldId, containerId) {
        httpClient(`/message/listSub?fieldId=${fieldId}`, 'GET', null, function (list) {
            const html = [];
            const navs = [];
            const tabs = [];
            let tabIndex = 0;

            list.forEach(res => {
                const tabId = `tab-${res.id}`;
                const navId = `nav-${res.id}`;
                navs.push(`
                <button class="nav-link ${tabIndex === 0 ? 'active' : ''}" id="${navId}" data-bs-toggle="tab" data-bs-target="#${tabId}" type="button" role="tab" aria-controls="${tabId}" aria-selected="${tabIndex}">${res.usage ?? res.domain}</button>
            `);
                tabs.push(`
                <div class="tab-pane fade ${tabIndex++ === 0 ? 'show active' : ''}" id="${tabId}" role="tabpanel" aria-labelledby="${navId}" tabindex="0">
                    <input type="hidden" name="subMessageId" value="${res.id}">
                    <div class="row mt-3">
                        <div class="col-md-3">
                            <label class="form-label">子域名称：</label>
                            <input type="text" class="form-control" name="domain" value="${res.domain}" disabled>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">子域用法：</label>
                            <input type="text" class="form-control" name="usage" value="${res.usage ?? ''}" disabled>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">子域类型：</label>
                            <input type="text" class="form-control" name="domainType" value="${res.domainType ?? ''}" disabled>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">是否可用：</label>
                            <input type="text" class="form-control" name="enabled" value="${res.enabled ? '正常' : '禁用'}" disabled>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-5">
                            <label class="form-label">实体类：</label>
                            <input type="text" class="form-control" name="holder" value="${res.holder}" disabled>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">描述：</label>
                            <input type="text" class="form-control" name="remark" value="${res.remark}" disabled>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">操作：</label><br>
                            <button type="button" class="me-2 btn btn-sm btn-outline-success" onclick="redirectToFieldPage('${res.id}')"><i class="bi bi-ticket-detailed"></i> 跳转子域字段</button>
                        </div>
                    </div>
                </div>
            `);
            });

            if (list.length !== 0) {
                html.push(`
                <nav>
                    <div class="nav nav-tabs" id="nav-tab" role="tablist">${navs.join('')}</div>
                </nav>
                <div class="tab-content border border-top-0 rounded-bottom p-3" id="tabContent">${tabs.join('')}</div>
            `);
            } else {
                html.push('暂无子域配置');
            }

            $('#' + containerId).html(html.join(''));
        });
    }

    function showEditSubMessageModal(parentFieldId, containerId, url, created, domainNo) {
        if (created) {
            $('#editSubMessageForm')[0]?.reset();
            $('#editSubMessageForm input[type="hidden"]').val('');

            const domain = $('#displayDomain').val();
            const usage = $('#displayUsage').val();
            const prefix = domain ? `${domain}${usage ? '$' + usage : ''}_` : '';
            $("#editSubMessageDomain").val(prefix ? `${prefix}F${domainNo}` : `F${domainNo}`);
            $("#editSubMessageRemark").val($('#displayRemark').val() + `F${domainNo}子域`);
        } else {
            const $tabContent = $('#tabContent');
            if (!$tabContent.length) {
                showWarningToast("未有选中的子域");
                return;
            }
            const $activePane = $tabContent.children('.tab-pane.active');
            $("#editSubMessageDomain").val($activePane.find('input[name="domain"]').val());
            $("#editSubMessageUsage").val($activePane.find('input[name="usage"]').val());
            $("#editSubMessageDomainType").val($activePane.find('input[name="domainType"]').val());
            $("#editSubMessageHolder").val($activePane.find('input[name="holder"]').val());
            $("#editSubMessageRemark").val($activePane.find('input[name="remark"]').val());
            $("#editSubMessageId").val($activePane.find('input[name="subMessageId"]').val());
        }

        $("#editSubMessageFieldId").val(parentFieldId);
        $('#editSubMessageType').val($('#displayType').val());
        $("#editSubMessageGroup").val($('#displayGroup').val());
        $("#editSubMessageCode").val($('#displayCode').val());
        $("#editSubMessageKind").val('subPayload');
        $("#editSubMessageCharset").val($('#displayCharset').val());

        $('#editSubMessageModal').modal('show');
        $('#saveEditSubMessageBtn').off('click').on('click', function (event) {
            const formData = {};
            const $editForm = $('#editSubMessageForm');
            if (!$editForm[0].checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
                $editForm.addClass('was-validated');
            } else {
                $editForm.serializeArray().forEach(item => {
                    formData[item.name] = item.value === '' ? null : item.value;
                });
                httpClient(url, created ? 'POST' : 'PUT', formData, function (data) {
                    showSuccessToast(`${created ? '新增' : '更新'}成功`);
                    loadSubdomainData(parentFieldId, containerId);
                });
                $('#editSubMessageModal').modal('hide');
            }
        });
    }

    function showDeleteSubMessageModal(parentFieldId, containerId) {
        const $tabContent = $('#tabContent');
        if (!$tabContent.length) {
            showWarningToast("未有选中的子域");
            return;
        }
        const $activePane = $tabContent.children('.tab-pane.active');
        const domain = $activePane.find('input[name="domain"]').val();
        const subMessageId = $activePane.find('input[name="subMessageId"]').val();

        $('#deleteSubMessageModal').modal('show');
        $('#saveDeleteSubMessageBtn').off('click').on('click', function () {
            httpClient(`/message/delete?ids=${subMessageId}`, 'DELETE', null, function (data) {
                showSuccessToast(`删除子域${domain}成功`);
                loadSubdomainData(parentFieldId, containerId);
            });
            $('#deleteSubMessageModal').modal('hide');
        });
    }

    function fixedFormatter(arg) {
        if (arg === true) {
            return "定长";
        }
        if (arg === false) {
            return "变长";
        }
        return "/";
    }

    function nameFormatter(value, row, index) {
        if (row.aliasName) {
            return `(${row.aliasName}) ${row.name}`;
        }
        return row.name;
    }

</script>
</body>
</html>